import React, { useState }  from 'react';
import './index.less';
import api from '../../../axios'
import { Table, Modal, Divider, Button,
  Form,
  Input,
  message,
} from 'antd';
import {  LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import EditModal from '../components/editSwiper'

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const normFile = (e) => {
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};

const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};


class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            visible: false,
            loading: true,
            fileloading: false,
            imageUrl: '',
            initialValues: {},
            editModalVis: false,
            detils_visible: false,
            infoDetails: "",
            pagination: {
              current: 1,
              size: 10,
            },
        };
    }

    showModal = ({ id }) => {
        this.getInfo(id)
        this.setState({
          detils_visible: true,
        });
    };
    
    hideModal = () => {
        this.setState({
            visible: false,
        });
    };

    componentDidMount(){
        this.getData()
    }

    
    getData = async () => {
      this.setState({ loading: true })

      let res = await api.ajax({
          method: 'get',
          url: `/docking/lis`,
      });

      this.setState({
          data: res.data,
          loading: false
      })
    }
    getInfo = async (id) => {
      let { data } = await api.get({
          method: 'get',
          url: `/docking/edit`,
          params: {
            id
          }
      });

      this.setState({
        infoDetails: data.title
      })
    }

    addSwiper = async ({ title, num }) => {
      console.log(title, num);
      let res = await api.ajax({
          method: 'post',
          url: `/docking/add`,
          data: {
            title,
            num
          }
      });
      this.setState({ pagination: { current: 1, size: 20 }, visible: false })
      this.getData()
    } 
    editMoadl = (record) => {
      this.setState({
        initialValues: record,
        editModalVis: true
      })
    }

    
    render() {
      const columns = [
          {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
          },
          {
            title: '数量',
            dataIndex: 'num',
            key: 'num',
          },
          {
            title: '对接名',
            dataIndex: 'title',
            key: 'title',
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            render: (text, record) => (
              <span>
                <a onClick={() => this.editMoadl(record)}>编辑</a>  <Divider type="vertical" />
                <a onClick={() => this.showModal(record)}>显示详情</a>
              </span>
            ),
          },
          
      ];    


      const onFinish = (values) => {
        console.log( values);
        this.addSwiper(values)
        //i1.hdslb.com/bfs/archive/e745631c211a5856f1e7f0679af1672a320a7da9.jpg@672w_378h_1c_!web-home-common-cover

      };


      const { initialValues, editModalVis, detils_visible, infoDetails } = this.state

        return (
           <>
             <div className='wapper'>
                <div className='header_title'>
                    <Button type="primary" onClick={() => this.setState({ visible: true }) }>添加对接信息</Button>
                </div>
                <Table
                    columns={columns}
                    dataSource={this.state.data}
                    pagination={this.state.pagination}
                    loading={this.state.loading}
                    scroll={{ x: 1500, y: 1000 }}
                />
             </div>
             
             <Modal
                  title="添加对接信息"
                  width={800}
                  visible={this.state.visible}
                  onCancel={this.hideModal}
                  onOk={() => this.onOk(this.state.data3)}
                  okText="保存"
                  footer={false}
                  cancelText="取消"
              >
                  <Form
                    name="validate_other"
                    {...formItemLayout}
                    onFinish={onFinish}
                    initialValues={{
                      'input-number': 3,
                      'checkbox-group': ['A', 'B'],
                      rate: 3.5,
                    }}
                  >

                    <Form.Item
                        label="	对接名"
                        name="title"
                        rules={[{ required: true, message: '请输入对接名' }]}
                      >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="数量"
                        name="num"
                        rules={[{ required: true, message: '请输入数量' }]}
                      >
                        <Input />
                    </Form.Item>

                    <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                      <Button type="primary" htmlType="submit">
                        保存
                      </Button>
                    </Form.Item>
                  </Form>
              </Modal>

                
              {
                editModalVis && 
                <EditModal
                  initialValues={initialValues}
                  cancelModal={() => {
                    this.setState({ editModalVis: false, pagination: { current: 1, size: 20 } })
                    this.getData()
                  }}
                />
              }

              <Modal
                  title="对接信息详情"
                  width={800}
                  visible={detils_visible}
                  onCancel={() => this.setState({
                    detils_visible: false
                  })}
                  footer={true}
                  okText="保存"
                  cancelText="取消"
              >
                  { infoDetails }
              </Modal>
           </>
        );
    }
}

export default index;